import React, {Component} from 'react'
import PageButton from './PageButton'
import FlexGrow from './List'
import FormBox from './FormBox'
import { Button, Form } from 'antd';
import { ModalForm } from '../../components'
const WrappedAdvancedSearchForm = Form.create()(ModalForm);
//import styles from './index.scss';


export default class ListBox extends Component {

    constructor(props) {
        super(props);
        this.pageNext = this.pageNext.bind(this);
        this.getListData = this.getListData.bind(this);
        this.hiddenBox = this.hiddenBox.bind(this);
        this.state = {
            loading: true,  //loading 加载

            indexList: [],//当前渲染的页面数据
            current: 1, //当前页码
            pageSize: 20, //每页显示的条数
            totalPage: 0,//总页数
            totalCount: 0, //总记录数
            formBoxStyleMin :'', //formbox的动画移动标识
            formBoxStyleHeight : '', //formbox的动画移动宽度
            conditonData: {}  //查询条件
        };
    }

    componentWillMount() {
        this.getListData();
    }

    rowHandles = (strHandles, rowObj) => {
        this.props.rowHandles(strHandles, rowObj);
    }

    //获取数据
    getListData(num, pageSize, conditonData) {
        if(typeof(num) == "undefined" || num == null || num.length==0){
            num = this.state.current;
        }
        if(typeof(pageSize) == "undefined" || pageSize == null || pageSize.length==0){
            pageSize = this.state.pageSize;
        }
        if(typeof(conditonData) == "undefined" || conditonData == null || conditonData.length==0){
            conditonData = this.state.conditonData
        }else{
            //点击搜索，有查询条件，分页要重新从第一页开始
            num = 1;
            //保存查询条件
            this.setState({
                conditonData: conditonData
            });
        }

        //let conData = { page: num, rows: pageSize, condition: conditonData };
        //$.ajax({url: this.props.url,type: 'post',contentType:'application/json; charset=utf-8', dataType: 'json', data: JSON.stringify(conData) })
        $.ajax({url: this.props.url,type: 'post', dataType: 'json', data: { page: num, rows: pageSize, ...conditonData } })
            .done(function (resData, status, xhr) {
                //console.log("getList返回数据：\n",JSON.stringify(resData, null, 4));
                if(resData.code == "1"){
                    this.setState({
                        loading: false,
                        indexList: resData.data.records, //当前页面数据
                        totalCount: resData.data.totalCount, //总记录数
                        totalPage: resData.data.totalPage,//总页数
                        current: num, //当前页码
                        pageSize: pageSize, //每页显示的条数
                    });
                }else{
                    console.log("请求数据错误：", resData.message);
                }
            }.bind(this));
    }
    //刷新列表
    refreshHandle = () => {
        this.pageNext();
    }

    pageNext(num, pageSize, conditonData) {
        this.setState({
            loading: true
        });
        this.getListData(num, pageSize, conditonData);
    }

    hiddenBox(){
      let formBoxStyleMin = this.state.formBoxStyleMin;
      if (formBoxStyleMin == ''){
        formBoxStyleMin = 'formBoxStyleMin';
      } else {
        formBoxStyleMin = ''
      }
      this.setState({
        formBoxStyleMin :formBoxStyleMin
      })
    }

    componentDidMount() { //formbox高度
        let height = window.getComputedStyle(this.refs.formBoxRef).height;
        this.setState({
          formBoxStyleHeight:height
        })

    }

    render() {
        //当左侧隐藏时，列表宽度加上左侧的宽度，
        //1、当前this.props.isHideLeft 是从父组件listComponent传过来
        //2、this.props.isHideLeft 最顶级赋值是在页面 containers/Main/main.js
        let isHideLeft = this.props.isHideLeft;

        let formBoxStyleHeight = this.state.formBoxStyleHeight;
        let formBoxStyleMin = this.state.formBoxStyleMin;
        let divStyle = {}
        if (formBoxStyleMin){
          divStyle = {
              //height: '33px',
              height: '0px',
              transition: 'all 0.5s linear',
              overflowY: 'auto',
              overflowX: 'hidden'
          };
        } else {
          divStyle = {
              //height: formBoxStyleHeight,
              height: '90px',
              transition: 'all 0.5s linear',
              overflowY: 'auto',
              overflowX: 'hidden'
          };
        }
        let headerOperation = this.props.headerOperation;
        return (
            <div className="wrap">
              <div className={'formBoxStyle '+formBoxStyleMin} ref='formBoxRef'  >
                <div className='formTitle'>
                  <span className='left'>查询条件</span>
                  <span className='right'>
                    <i className="slidUp" onClick={this.hiddenBox}></i>
                    {/*<i className="slidDown"></i>*/}
                  </span>
                </div>
                  <div className="listSearch"  style={divStyle}>
                    <WrappedAdvancedSearchForm
                        formAlerSize='big'
                        formUrl=""
                        getFormData={this.props.searchComponentData}
                        pageNext={this.pageNext}
                    />
                  </div>
              </div>
              <div className='formBoxStyle'>
                  <div className='formTitle'>
                      <span className='left'>数据列表</span>
                      <span className='right'>
                          {
                              headerOperation.map( (e, index) => {
                                  return(
                                      <Button key={index} className='mr-10' style={{marginRight:'30px'}} type="primary" onClick={this.rowHandles.bind(this, e.handleName)}>{e.showName}</Button>
                                  )
                              })
                          }

                      </span>
                  </div>
                  <FlexGrow
                        {...this.props}
                        ref = 'flexGrow'
                        loading = {this.state.loading}
                        indexList={this.state.indexList}
                  />
                  <PageButton { ...this.state } pageNext={this.pageNext}/>
              </div>


            </div>
        );
    }
}
